<template>
  <main-frame :location="location">
    <template slot="mainFrame">
      <slot name="custom"></slot>
      <div class="main-frame-content">
        <!-- 搜索组建 -->
        <div class="search" v-show="searchShow">
          <div>
            <el-form :inline="true">
              <component ref="searchCom" v-bind:is="searchModel"></component>
            </el-form>
          </div>
          <div>
            <el-form :inline="true">
              <el-form-item>
                <el-button @click="search()" icon="el-icon-search" type="primary" class="search-btn-class" size="mini">
                  搜索
                </el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  @click="resetFormAndTale()"
                  icon="el-icon-refresh"
                  type="default"
                  size="mini"
                >刷新
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- </el-card> -->
        </div>

        <!-- 操作栏 -->
        <div class="top_operate" v-show="operateShow">
          <slot :slot-scope="resParam" name="top_operate"></slot>
        </div>

        <div class="list_frame">
          <!-- <el-card style="height:auto"> -->
          <el-table
            :header-cell-style="headerCellStyle"
            :header-row-style="headerRowCss"
            :data="dataList"
            v-loading="tableLoading"
            body-style="height:100%;"
            size="mini"
            @select="select"
            @select-all="selectAll"
            @selection-change="selectionChange"
            @expand-change="expandChange"
            :expand-row-keys="expandRowKeys"
            :row-key="removeKey"
          >
            <el-table-column type="selection" align="left" width="50"></el-table-column>
            <slot name="columns"></slot>
            <slot name="operate"></slot>
          </el-table>

          <div class="pageNation">
            <el-row>
              <el-col :span="2">
                <auth :code="delBtnPermission">
                  <template slot="auth">
                    <div v-if="showDelBtn" style="margin-top:10px">
                      <el-button type="danger" size="small" :disabled="delBtnFlag" @click="del()">删除已选</el-button>
                    </div>
                  </template>
                </auth>
              </el-col>
              <el-col v-if="tempIsPage" :span="22">
                <div style="margin-top:10px;text-align:right">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[15, 30, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- </el-card> -->
        </div>
      </div>
    </template>
  </main-frame>
</template>
<script>
let _this = {};
import util from "@/utils/CommonUtils.js";

let config = require("@/config.js").config;

export default {
  data() {
    return {
      delBtnFlag: true,
      dataList: [],
      removeValues: [],
      allList: [],
      total: 0, // 列表内所有数据的长度
      currentPage: 1, // 初始页 0 jpa是0
      index: 0, // jpa请求分页参数
      pageSize: 15, // 当前页面内的列表行数
      tableLoading: true,
      checkRowList: [], // 当前选中的数据
      tempIsPage: true,
      expandRowKeys: [],
      resParam: {
        rows: [],
        searchParam: {}
      },
      initSearchParam: {} // 初始化的搜索条件
      , NULL_ARR: [null, undefined, "null", "undefined",'']
      , RESPONSE_CODE:
        {
          response_code: 'code',
          response_msg: 'msg',
          response_data: 'data',

          pageNum: 'pageNum',
          pageSize: 'pageSize',
          pages: 'pages',
          rows: 'rows',
          size: 'size',
          total: "total"
        },
      CODE_ENUM_KEY:
        {
          response_code: 'response_code',
          response_msg: 'response_msg',
          response_data: 'response_data',

          pageNum: 'pageNum',
          pageSize: 'pageSize',
          pages: 'pages',
          rows: 'rows',
          size: 'size',
          total: "total"
        }
      , expandChangeMap: {}
      , expandRows: 0
    };
  },
  props: {
    getDataUrl: {  // 必须提供字段
      required: true,
      type: String,
    },
    removeUrl: {   // 可选字段，有默认值
      required: false,
      type: String,
    },
    location: {   // 可选字段，有默认值
      required: false,
      type: String,
    },
    removeKey: {   // 可选字段，有默认值
      required: false,
      type: String,
      default: 'id',
    },
    searchShow: {   // 可选字段，有默认值
      required: false,
      type: Boolean,
      default: false,
    },
    searchModel: {   // 可选字段，有默认值
      required: false,
      type: Object,
      default: false,
    },
    reloadTable: {   // 可选字段，有默认值
      required: true,
      type: Boolean,
      default: false,
    },
    operateShow: {   // 可选字段，有默认值
      required: false,
      type: Boolean,
      default: true,
    },
    showDelBtn: {   // 可选字段，有默认值
      required: true,
      type: Boolean,
      default: false,
    },
    delBtnPermission: {
      required: false,
      default: '',
      type: String
    },
    isPage: {   // 可选字段，有默认值
      required: false,
      type: Boolean,
      default: true,
    },that: {   // 可选字段，有默认值
      required: false,
      type: Object,
      default: null,
    },

  },

  mounted() {
    this.initSearchParam = JSON.stringify(_this.$refs.searchCom.params);
    this.initData(this.searchParam());
  },
  watch: {
    isPage: {
      handler(newVal, oldVal) {

      }
    },
    delBtnPermission: {
      handler(newVal, oldVal) {
      }
    },
    reloadTable: {
      handler(newVal, oldVal) {
        if (newVal) {
          _this.initData({});
        }
      },
      immediate: true, //关键
      deep: true
    }

  },
  created() {
    _this = this;
    this.isStartPage();
    this.delBtnPermissionData();
    // _this.setTableHeight();

  },
  methods: {
    isStartPage() {
      if (this.isPage == undefined) {
        this.tempIsPage = true;
        this.isPage = true;
      }
    },
    // 重置搜索条件，刷新表格
    resetFormAndTale() {
      _this.resParam.searchParam = {};
      _this.$refs.searchCom.params = JSON.parse(this.initSearchParam)
      _this.initData({});
    },
    // 改变复选框状态触发
    selectionChange(selection) {
      _this.resParam.rows = [];
      this.removeValues = [];
      selection.forEach(element => {
        _this.resParam.rows.push(element);
        this.removeValues.push(element[this.removeKey]);
      });
      if (selection.length > 0) {
        this.delBtnFlag = false;
      } else {
        this.delBtnFlag = true;
      }
      //console.log(_this.checkRowList);
    },

    // 删除操作
    del() {
      if (this.NULL_ARR.indexOf(this.removeUrl) > -1) {
        this.$warning("请配置删除数据地址");
        return;
      }
      this.$confirm("此操作将永久删除已选数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$del(this.removeUrl.replace("?", this.removeValues.join(",")), {}).then(
          res => {
            if (res.R) {
              this.$success("已删除");
              this.initData({});
            }
          }
        );
      });
    },
    setPageParams(param) {
      let a = this.currentPage > 0 ? this.currentPage : 1;
      if (this.tempIsPage) {
        param[this.getResponseCode(this.CODE_ENUM_KEY.pageNum)] = a;
        param[this.getResponseCode(this.CODE_ENUM_KEY.pageSize)] = this.pageSize;
      }
    },
    // 获取自定义配置参数
    getResponseCode(code) {
      let val = code;
      if (config.responseConfig === null) {
        console.log("封装的数据表格默认读取响应字段:", this.RESPONSE_CODE)
        val = this.RESPONSE_CODE[code];
      } else {
        if (this.NULL_ARR.indexOf(config.responseConfig[code]) < 0) {
          val = this.RESPONSE_CODE[code]
        } else {
          val = config.responseConfig[code];
        }
        console.log(val);
        return val;
      }
    },
    // 获取表格数据
    initData(param) {
      if (param === null || param === undefined) {
        param = {};
      }
      this.loading(true);
      let dataUrl = this.getDataUrl;
      this.setPageParams(param);
      this.filterParams(param);
      this.$get(dataUrl, param).then(res => {
        _this.reqSuccess(res);
      });
    },

    filterParams(param) {
      for (let key in param) {
        let val = param[key];
        if (this.NULL_ARR.indexOf(val) > -1) {
          delete param[key];
        }
      }
    },

    reqSuccess(res) {
      if (this.isPage === true) {
        _this.dataList = res[this.getResponseCode(this.CODE_ENUM_KEY.response_data)][this.getResponseCode(this.CODE_ENUM_KEY.rows)];
        _this.setPage(res);
      } else {
        _this.dataList = res[this.getResponseCode(this.CODE_ENUM_KEY.response_data)];
      }
      _this.loading(false);
    },
    // 设置分页参数
    setPage(res) {
      if (res[this.getResponseCode(this.CODE_ENUM_KEY.response_code)] === config.res_success_code) {
        this.pageSize = res[this.getResponseCode(this.CODE_ENUM_KEY.response_data)][this.getResponseCode(this.CODE_ENUM_KEY.pageSize)];
        this.total = res[this.getResponseCode(this.CODE_ENUM_KEY.response_data)][this.getResponseCode(this.CODE_ENUM_KEY.total)];
        this.currentPage = res[this.getResponseCode(this.CODE_ENUM_KEY.response_data)][this.getResponseCode(this.CODE_ENUM_KEY.pageNum)];
      }
    },
    // 关闭加载
    loading(flag) {
      this.tableLoading = flag;
    },
    // 获取搜索参数
    searchParam() {
      let param = _this.$refs.searchCom.params;
      let obj = {};
      for (let key in param) {
        let val = param[key];

        if (val instanceof Array) {
          console.log("数组转换字符串-->" + key);
          obj[key] = val.join(",");
        } else if (val instanceof Date) {
          obj[key] = util.dateFormatToStr(val);
        } else {
          obj[key] = val;
        }
      }
      return obj;
    },

    // 搜索按钮
    search() {
      _this.tableLoading = true;
      // 搜索参数
      // alert(JSON.stringify(_this.$refs.searchCom.params));
      this.resParam.searchParam = this.searchParam();
      this.initData(this.searchParam());
    },
    headerRowCss(rowIndex) {
    },
    headerCellStyle({row, column, rowIndex, columnIndex}) {
      let color = "#555E6F";
      let bg = "#F8F8F9";
      let borderTopRightRadius = "0px";
      let s = {
        background: bg,
        color: color,
        borderTopRightRadius: borderTopRightRadius
      };
      if (rowIndex == 0 && columnIndex == 0) {
        return s;
      } else if (rowIndex == 0 && columnIndex == _this.colunmsCount - 1) {
        return s;
      } else if (rowIndex == 0) {
        return {
          background: bg,
          color: color
        };
      }
    }, // 初始页page、初始每页数据数pagesize和数据data
    // 更换每页列内不同的行数：更新列表数据
    handleSizeChange: function (pageSize) {
      this.pageSize = pageSize;
      this.currentPage = 1;
      _this.initData(this.resParam.searchParam);
    },
    // 换页：更新列表数据
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      _this.initData(this.resParam.searchParam);
    },
    expandChange(row, expandedRows) {
      let expand = expandedRows.length === 0 ? false : (this.expandRows < expandedRows.length)||(this.expandRows === expandedRows.length);
      this.expandRows = expandedRows.length;
      this.expandRowKeys = expandedRows.length > 0 ? [expandedRows[expandedRows.length - 1][this.removeKey]] : []
      let params = {
        expand: expand,
        row: row,
        rows: expandedRows,
      }
      let p=this.that;
      if (!util.checkIsEmpty(p)){
        p.monitorRowExpandChange(params);
      }
      // console.log("是否展开表格 ",expand)
      //this.$EventBus.$emit("rowExpandChange", params);
    }
  }
};
</script>
<style scoped>
.main-frame-content {
  background: white;
  padding: 10px 20px 20px 20px;
}

.pageNation {
  margin: 25px 0;
}

.el-card {
  padding: 0;
}

.search {
  text-align: left;
  border-radius: 5px;
  padding-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.search .el-form, .search div {
  display: flex;
  flex-direction: row;
}

.search .el-form--inline .el-form-item {
  height: 100%;
  margin-bottom: 10px;
}

.top_operate {
  text-align: left;
  width: 100%;
  margin-bottom: 10px;
}

.list_frame .el-table td,
.list_frame .el-table th {
  text-align: center;
  color: #555e6f;
}


</style>
